<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>

<body>
  <div id="app">
    <rir></rir>
    <hr>
    <riir></riir>
  </div>
  <script>
    // 订阅发布者模式
    const Event = {
      // 用于存储事件类型及其对应的回调函数数组
      task: {},
      // 添加事件监听器的方法，接受事件类型和回调函数作为参数
      on: function (type, callback) {
        if (!this.task[type]) {
          this.task[type] = [];
        }
        this.task[type].push(callback);
      },
      // 触发指定事件类型的所有回调函数，并传递参数
      emit: function (type, ...args) {
        var fns = this.task[type];
        if (fns && fns.length > 0) {
          for (var callback of fns) {
            callback(...args);
          }
        }
      },
      // 移除指定事件类型的特定回调函数
      off: function (type, callback) {
        var fns = this.task[type];
        if (fns && fns.length > 0) {
          var index = 0;
          for (var item of fns) {
            if (item === callback) fns.splice(index, 1);
            index++;
          }
        }
      }
    }
  
    const app = Vue.createApp({}) // 创建一个 Vue 应用实例
    app.component('rir', { // 定义名为 'rir' 的组件
    // 组件的模板
      template: ` 
      <h2>rir组件</h2>
      <p><input size="30" @keyup.enter="keyput"></p>
      `,
      methods:{ // 定义组件的方法
        keyput(event){ // 当输入框按下回车键时触发的方法
          Event.emit('change',event.target.value.trim()); // 触发 'change' 事件，并传递输入框的值
          event.target.value = ''; // 清空输入框的值
        }
      }
    })
    app.component('riir', { // 定义名为 'riir' 的组件
      data(){ // 定义组件的数据
        return{
          msg:'?' // 初始化消息为 '?'
        }
      },
      created(){ // 组件创建时调用的钩子函数
        Event.on('change',(msg)=>{ // 监听 'change' 事件
          this.msg = msg; // 更新组件的消息为事件传递的值
        })
      },
      // 组件的模板
      template: ` 
      <h2>riir组件</h2>
      <p>来自rir的消息{{msg}}</p>
      `,
    })
    const vm = app.mount('#app') // 将应用实例挂载到 id 为 'app' 的 DOM 元素上
  </script>
</body>

</html>